In this article I will show you how to build responsive website with @media query in asp.net. Depending on the web browser size, assign different stylesheets to the css @media Query.
You can apply css style according to the browser widths. For the reason, we need to use @media Query to make a responsive website. A web page automatically adjusts itself for displaying the content in different devices.
Create a new website in visual studio and create a web form then copy and paste the following code.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/Style.css" rel="stylesheet" />
</head>
<body>
<div>
Proin sagittis, orci vitae variussodales, nunc enim viverra sapien, in tempus ipsum ligula eu tortor. Aliquamenim urna, elementum in gravida fermentum, facilisis ut tortor. Vivamus vitaeodio non enim bibendum facilisis sit amet vel quam. Vestibulum ante ipsumprimis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullamcondimentum commodo consectetur. Nam ultricies orci est, id sagittis eratullamcorper sit amet. Pellentesque viverra egestas felis, tristique gravidamauris convallis scelerisque. Maecenas pellentesque id ex euismod sagittis.
</div>
</body>
</html>
Create a css stylesheet and copy and paste the following code:
body {
background: black;
font-style: italic;
color: white;
}
@media screen and (max-width:800px) {
body {
background: white;
font-style: normal;
color: black;
}
}
Description: The css stylesheet describes the background:black,color: white and font-style: italic.In the @media query for screen (max-width 800px), background:white,font-style:normal and color:black. If the browser width reaches below 800px, @media screen(max-width:800px) css style will be applied.
Post your comments / questions
Recent Article
- The request was aborted: Could not create SSL/TLS secure channel -Error in Asp.net
- FieldError: Cannot resolve keyword 'id' into field in Django project
- How to hide the ID field from the Django admin?
- It is impossible to add a non nullable field without specifying a default. Django error
- ImportError: cannot import name 'url' from 'django.conf.urls' - Django Error
- How to Enable Virtualization in BIOS Security Settings in Intel Processors For Android Studio?
- Dependency 'androidx.activity:activity:1.8.0' requires libraries and applications that depend on it.
- AttributeError: 'NoneType' object has no attribute 'get_text' - Python
Related Article